<template>
  <div class="address_edit">

    <van-address-edit :area-list="areaList" :address-info="addressInfo" show-postal show-delete show-set-default
                      :search-result="searchResult"
                      :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete">

      <div solt="default" class="tips">

        提醒：每次下单时会使用该地址，实际下单地址会根据您购物切换的地区进行智能判断，请在下单时确认。

      </div>

    </van-address-edit>

  </div>

</template>

<script>

import {

  areaList

} from "@vant/area-data";

import {
  getAddressDetailByIdAPI, saveAddressAPI, deleteAddressByIdAPI,
} from "@/api/address.js";

export default {

  data() {

    return {
      searchResult: [],
      areaList, //地区列表
      addressInfo: {

        //收货人信息初始值

        id: "", //每条地址的唯一标识

        name: "", //姓名

        tel: "", //电话

        province: "", //省份

        city: "", //城市

        county: "", //区县

        areaCode: "", //地区编码，通过省市区选择获取（必填）

        postalCode: "", //邮政编码

        addressDetail: "", //详细地址

        isDefault: false, //是否选择默认

      },

    };

  },

  props: ["id"],

  created() {

    this.getAddressDetail();

  },

  methods: {

    //根据id获取地址数据

    getAddressDetail() {

      if (!this.id) {

        console.log(this.id); //id==0 则是新增 否则是编辑

        return;

      }

      //获取登录用户的收货地址

      getAddressDetailByIdAPI(this.id).then(result => {

        this.addressInfo.id = result.data.id;

        this.addressInfo.name = result.data.name;

        this.addressInfo.tel = result.data.tel;

        this.addressInfo.province = result.data.province;

        this.addressInfo.city = result.data.city;

        this.addressInfo.county = result.data.county;

        this.addressInfo.areaCode = result.data.area_code;

        this.addressInfo.postalCode = result.data.postal_code;

        this.addressInfo.addressDetail = result.data.address_detail;

        this.addressInfo.isDefault = result.data.is_default == 1 ? true : false;

      }).catch(() => {
      });

    },

    //处理保存地址

    onSave(content) {

      let params = {};

      params.id = content.id;

      params.name = content.name;

      params.tel = content.tel;

      params.province = content.province;

      params.city = content.city;

      params.county = content.county;

      params.area_code = content.areaCode;

      params.postal_code = content.postalCode;

      params.address_detail = content.addressDetail;

      params.is_default = content.isDefault == true ? 1 : 0;

      saveAddressAPI(params).then(result => {

        this.$toast(result.msg); //地址修改成功

        setTimeout(() => {

          this.$router.go(-1);

        }, 1000);

      });

    },

    // 处理删除地址

    onDelete(content) {

      let id = content.id;

      if (!id) return;

      deleteAddressByIdAPI(id).then(result => {

        this.$toast(result.msg); //删除成功

        setTimeout(() => {

          this.$router.go(-1); //页面跳转
        }, 1000);
      });
    },
  },

};

</script>

<style scoped lang="less">

@bgColor: #f8f8f8;
@mainColor: #ff0000;

.address_edit {

  /deep/ .van-address-edit {
    border-top: 5px solid @bgColor;
    position: relative;

    .van-address-edit__buttons {
      margin-top: 70px;

      .van-button--danger {
        background: @mainColor;
        border-color: @mainColor;
      }
    }

    .tips {
      padding: 12px 12px;
      font-size: 12px;
      color: @mainColor;
    }
  }
}
::v-deep *{
  font-size: 18px;
  margin-top: 2px;
  margin-bottom: 2px;
}
::v-deep .van-field__label span{
  line-height: 30px;
}
</style>

